<template>
    <div>

        <!--实名框-->
        <template>
            <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :before-upload="beforeUpload"
                :http-request="httprequest"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </template>

    </div>

</template>

<script>
    import axios from 'axios';
    import pagination from '@/component/pagination';
    import ImageFileInput from '@/component/imageFileInput.vue';
    import {mytips} from '@/module/tools';

    document.title='图片上传';
    export default {
        name: 'customerList',
        components: {pagination,ImageFileInput},
        data() {
            return {
                dialogVisible: false,
                dialogImageUrl: ''
            };
        },

        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            beforeUpload(file) {
                this.param.append('file',file)
            },
            httprequest() {

            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

